//文章详情页

var Style = require('./../../assets/css/detail.scss')
var React = require('react');
//引如一个自己通过link内置属性定义的组件，省去多次写activeclass
var IndexLink = require('react-router').IndexLink;//内置的激活状态的标签
var Link = require('react-router').Link;
//时间处理
var moment = require('moment');
//loading加载页面
var Loading = require('./public/loading.js')

class Detail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }
    componentDidMount() {
        console.log('componentDidMount钩子函数重新加载')
        console.log(this)
        fetch('http://localhost:3000/content/listId', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              id:this.props.location.state.id,
            })
        })
        .then((response)=> {
            if (response.status >= 400) {
                throw new Error("Bad response from server");
            }
            return response.json();
        })
        .then((data)=> {
            this.setState({
                detail:data
            })
        })
    //同过传来的数据进行获取之前或者之后逇值
    var vm = this;
    function getOldNext() {
        let listId = vm.props.location.state.listId
        let count = vm.props.location.state.count
        var oldTitle = '';
        var oldId = '';
        var oldDate = '';
        var nextTitle = '';
        var nextId = '';
        var nextDate = '';

        let oldIndex = listId-1;
        let nextIndex = listId+1;
        if(oldIndex>=0){
            oldTitle = count[oldIndex].title
            oldId = count[oldIndex]._id
            oldDate = count[oldIndex].date
            vm.setState({
                oldTitle:oldTitle,
                oldId:oldId,
                oldDate,
                oldIndex
            })
        }
        if(nextIndex<count.length){
            nextTitle = count[nextIndex].title
            nextId = count[nextIndex]._id
            nextDate = count[nextIndex].date
            vm.setState({
                nextTitle:nextTitle,
                nextId:nextId,
                nextDate,
                nextIndex
            })
        }
    }
    getOldNext()
    }
    
    componentWillReceiveProps(nextProps){

        console.log('componentWillReceiveProps更新')
        console.log(nextProps)
        console.log(this)
        console.log(this.props.location.state)//这个值要比真实需要的值大一
        console.log('++>')

        var oldTitle = '';
        var oldId = '';
        var oldDate = '';

        var nextTitle = '';
        var nextId = '';
        var nextDate = '';
        var count = this.props.location.state.count;
        var listId = nextProps.location.state.listId;//所以这里减1(发现有个nextprops的属性解决了)
        
        if(nextProps.location.state.move == 'left'){
            console.log('left')
            var oldIndex = listId-1;
            var nextIndex = listId+1;
        }else{
            console.log('right')
            var oldIndex = listId-1;
            var nextIndex = listId+1;
        }
        //这里是累赘了但是是为了祭奠下找这个属性的6个小时
            
        
        console.log(oldIndex)
        console.log(nextIndex)
        console.log('*****')
        if(oldIndex>=0){
            oldTitle = count[oldIndex].title
            oldId = count[oldIndex]._id
            oldDate = count[oldIndex].date
            // this.setState({
            //     
            // })
        }
        if(nextIndex<count.length){
            nextTitle = count[nextIndex].title
            nextId = count[nextIndex]._id
            nextDate = count[nextIndex].date
            // this.setState({
            //     nextTitle:nextTitle,
            //     nextId:nextId,
            //     nextDate:nextDate,
            //     nextIndex:nextIndex
            // })
        }
        console.log(this)    
        console.log('-----')
           
        this.setState({
            oldTitle:oldTitle,
            oldId:oldId,
            oldDate:oldDate,
            oldIndex:oldIndex,
            nextTitle:nextTitle,
            nextId:nextId,
            nextDate:nextDate,
            nextIndex:nextIndex
        },()=>{
            fetch('http://localhost:3000/content/listId', {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                  id:this.props.location.state.id,
                })
            })
            .then((response)=> {
                if (response.status >= 400) {
                    throw new Error("Bad response from server");
                }
                return response.json();
            })
            .then((data)=> {
                this.setState({
                    detail:data
                })
            })
        });
    }
    render() {
        var contentData = this.state.detail
        if(!contentData) {
            return <div>数据加载中</div>
        }
        return (
            <div className="animated flip">
                {/*文章详情*/}
                <div className="container">
                    <div className="row detail-yu">
                        <div className="visible-md-inline-block visible-lg-inline-block visible-sm-inline-block col-lg-2 col-md-2 ">文章目录</div>
                        <div className="col-lg-10 col-md-10 col-sm-10">
                            <div className="blog-post detailContent-yu">
                                <h2 className="blog-post-title title-yu">
                                    {
                                        contentData.map((item,i)=>{
                                            return(
                                                item.title
                                            )
                                        })
                                    }
                                </h2>
                                <p className="blog-post-meta style-yu">
                                {
                                    contentData.map((item,i)=>{
                                        return(
                                            `${moment(item.date).format('MMMM Do YYYY, h:mm:ss a')}  by`
                                        )
                                    })
                                }
                                &nbsp;
                                <a href="javascript:;">
                                {
                                    contentData.map((item,i)=>{
                                        return(
                                            item.author
                                        )
                                    })
                                }</a></p>
                                {/*简介*/}
                                <p>
                                {
                                    contentData.map((item,i)=>{
                                        return(
                                            item.otherTitle
                                        )
                                    })
                                }
                                </p>
                                <hr/>
                                {/*内容区使用如果有重要的模块使用blockquote标签包裹
                                    pre标签以及内置code包裹代码
                                */}
                                <blockquote>
                                <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                </blockquote>
                                <pre><code>Example code block</code></pre>
                                {
                                    contentData.map((item,i)=>{
                                        return(
                                            <div key={i} dangerouslySetInnerHTML={{__html:item.textarea}}></div> 
                                        )
                                    })
                                }
                            </div>
                        </div>
                    </div>
                </div>
                <div className="container">
                    <div className="row">
                        <nav aria-label="...">
                            <ul className="pager">
                            {
                                parseInt(this.state.oldIndex)>=0?
                                <li className="previous"><Link to={{
                                    pathname:`/${moment(this.state.oldDate).format('L')}/${this.state.oldTitle}`,
                                    state:{
                                        id:this.state.oldId,
                                        listId:parseInt(this.state.oldIndex),
                                        count: this.props.location.state.count,
                                        move:'left'
                                    }
                                }}><span aria-hidden="true">&larr;</span>{this.state.oldTitle}</Link></li>
                                :<li className="previous disabled"><a><span aria-hidden="true">&larr;</span>到头了</a></li>
                            }
                            {
                                parseInt(this.state.nextIndex) < parseInt(this.props.location.state.count.length)?
                                <li className="next"><Link to={{
                                    pathname:`/${moment(this.state.nextDate).format('L')}/${this.state.nextTitle}`,
                                    state:{
                                        id:this.state.nextId,
                                        listId:parseInt(this.state.nextIndex),
                                        count: this.props.location.state.count,
                                        move:'right'
                                    }
                                }}>{this.state.nextTitle}<span aria-hidden="true">&rarr;</span></Link></li>
                                :<li className="next disabled"><a>到底了<span aria-hidden="true">&rarr;</span></a></li>
                            }
                            </ul>
                        </nav>
                    </div>
                </div>
                <div>
                {/*更多组件*/}
                    <div className="container">
                        <div className="row" style={{textAlign:'center'}}>
                            {/*分享栏目*/}
                            <div>
                                <dl className="share-yu">
                                    <dt><a>分享到：</a></dt>
                                    <dd><a target="_blank" href="http://service.weibo.com/share/share.php">微博</a></dd>
                                    <dd><a>腾讯</a></dd>
                                    <dd><a>知乎</a></dd>
                                    <dd><a>GitHub</a></dd>
                                    <dd><a onClick={()=>{
                                        console.log(this.props.location.pathname)
                                    }}>Twitter</a></dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

module.exports = Detail;